<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>您好Springboot</title>
    <%-- 引入函数类库 --%>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        /* 1.让页面全部加载完成 函数式编程 */
        /*        $(function () {
                    /!* 1.$.get() $.post() $.getJSON() $.ajax *!/
                    /!* 参数: JSON {id:1,name:"tomcat"} || 字符串 id=1&name="tomcat" *!/
                    $.get("/doFindAjax", function (data) {
                        /!*console.log(data);*!/
                        /!* forof遍历取值 *!/
                        for (let user of data) {
                            let id = user.id;
                            let name = user.name;
                            let age = user.age;
                            let sex = user.sex;
                            let tr = "<tr align='center'><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td>" + sex + "</td></tr>";
                            $("#table1").append(tr);
                        }
                    })
                })      */
    </script>
</head>
<body>
<table border="1px" width="65%" align="center" id="table1">
    <tr>
        <td colspan="4" align="center"><h3>学生信息</h3></td>
    </tr>
    <tr>
        <td colspan="4" align="center">
            <h3>
                <button onclick="doAjaxGet()" value="$.get()">$.get()</button>&emsp;
                <button onclick="doAjaxPost()" value="$.post()">$.post()</button>&emsp;
                <button onclick="doAjaxGetJSON()" value="$.getJSON()">$.getJSON()</button>&emsp;
                <button onclick="doAjax()" value="$.ajax()">$.ajax()</button>
            </h3>
        </td>
    </tr>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
</table>

<script type="text/javascript">

    function doAjaxGet() {
        $.get("/doFindAjax", function (data) {
            /* forof遍历取值 */
            /* 参数: JSON {id:1,name:"tomcat"} || 字符串 id=1&name="tomcat" */
            for (let user of data) {
                let id = user.id;
                let name = user.name;
                let age = user.age;
                let sex = user.sex;
                let tr = "<tr align='center'><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td>" + sex + "</td></tr>";
                $("#table1").append(tr);
            }
        })
    }

    function doAjaxPost() {
        alert("您没有该操作的权限")
    }

    function doAjaxGetJSON() {
        alert("您没有该操作的权限")
    }

    function doAjax() {
        $.ajax({
            url: "/doFindAjax", /* url地址 */
            method: "get", /* 请求类型 */
            data: {id: 1, name: "tomcat"}, /* 请求参数 */
            success: function (data) {
                for (let user of data) {
                    let id = user.id;
                    let name = user.name;
                    let age = user.age;
                    let sex = user.sex;
                    let tr = "<tr align='center'><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td>" + sex + "</td></tr>";
                    $("#table1").append(tr);
                }
            },
            error: function (data) {
                alert("请求频繁 请稍后重试");
            },
            cache: true, /* 默认是缓存开启 */
            async: true /* 默认异步请求 */
        })
    }

</script>

</body>
</html>